<!--//资源首页-->
<script setup lang="ts">
//增加SEO
useHead({
    title: '资源上传 - 迅颖',
    meta: [
        { hid: 'keywords', name: 'keywords', content: '项目' }
    ]
})
import requester from "~/utils/request";
import { uploadUrl } from "~/utils/request";
import { useRoute } from "vue-router";
import { userStore } from "~/composables/useUserStore";
import WangEditor from '~/components/wangEditor.vue';
const router = useRoute();
const store = userStore();

const productId = router.query.id
if (productId) {
    function getProduct() {
        const param = {
            productId: productId,
        }
        if (store.token.userCode) {
            param.userCode = store.token.userCode
        }
        requester.post('/api/product/getProduct', param).then((res: any) => {
            if (res.code == 200) {
                state.form.productName = res.data.productName
                state.form.productDesc = res.data.productDesc
                state.form.productIntro = res.data.productIntro
                state.categoryIdString = res.data.categoryId
                state.fileList = res.data.packFiles
                state.fileList.forEach((element:any) => {
                    element.name = element.fileName
                });
                res.data.productTag = res.data.productTag.split(",")
                res.data.productTag.forEach((element:any) => {
                    tagClick(element)
                });
            }
        })
    }
    getProduct()
}

const state = reactive(<any>{
    showBg: true,
    form: {
        productName: "",
        productDesc: "",
        productIntro: "",
        // bzImps: "",
        // videoFiles: "",
        categoryId: [],
        productType: 2
    },
    fileList:[],
    imageUrl: "",
    radio: 1,
    radio1: 1,
    priceIdx: null,
    treeData: [],
    //参考标题
    showTitle: false,
    isClient: false,
    isBz: false,
    showBl: false,
    showDesc: false,
    props: {
        label: "categoryName",
        children: "getCategoryVo",
        value: "categoryId",
    },
    priceList: [3, 6.8, 9.9, 12.8, 29.8, 59.8, 129],
    dynamicTags: [],
    tagList: ["电商系统", "管理系统", "推荐系统", "大数据可视化"],
    inputVisible: false,
    priceVisible: false,
    inputValue: "",
    priceValue: "",
    // 富文本功能配置
    editorOption: {
        modules: {
            toolbar: [
                ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
                ["blockquote", "code-block"], //引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
                [{ list: "ordered" }, { list: "bullet" }], //列表
                [{ script: "sub" }, { script: "super" }], // 上下标
                [{ indent: "-1" }, { indent: "+1" }], // 缩进
                [{ direction: "rtl" }], // 文本方向
                [{ size: ["small", false, "large", "huge"] }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
                [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
                [{ font: [] }], //字体
                [{ align: [] }], //对齐方式
                ["clean"], //清除字体样式
                ["link", "image", "video"], //上传图片、上传视频
            ],
        },
    },
});

// 客户端渲染
onMounted(() => {
    state.width = document.documentElement.clientWidth;
    window.onresize = () => {
        state.width = document.documentElement.clientWidth;
        state.showBg =
            /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720
                ? false
                : true;
    };
    state.showBg =
        /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 720
            ? false
            : true;
    getCategoryList();
});
function getCategoryList() {
    requester.post("/api/category/categoryList", { channel: 2 }).then((res) => {
        state.treeData = res.data;
        if (state.treeData.length > 0) {
            state.treeData.forEach((item: any) => {
                clickCategory(item);
            });
        }
    });
}
function clickCategory(item: any) {
    requester.post("/api/category/clickCategory", {
        firstSysId: item.categoryId,
    })
        .then((res: any) => {
            if (res.code == 200) {
                item.getCategoryVo = res.data;
                if(productId){
                    for (let index = 0; index < item.getCategoryVo.length; index++) {
                        const element = item.getCategoryVo[index];
                        if(element.categoryId == state.categoryIdString){
                            state.form.categoryId.push(item.categoryId)
                            state.form.categoryId.push(element.categoryId)
                            return
                        }
                    }
                }
            }
        });
}
//方法
function onExceed(e: any) {
    if (e.length > 0) ElMessage.warning("请先删除已上传的zip");
}
function onVideoExceed(e: any) {
    if (e.length > 0) ElMessage.warning("请先删除已上传的视频");
}
function handleRemove() {
    state.form.videoFiles = "";
}
// 上传视频后的钩子
function beforeUpload(file: any) {
    const isLtIG = file.size / 1024 / 1024 < 1024;
    if (!isLtIG) {
        ElMessage.error("上传附件不能大于1GB");
    }
    return isLtIG;
}
//上传视频成功的钩子
function handleZipSuccess(res: any) {
    state.form.packFiles = res.data.url;
}

//上传封面成功的钩子
function handleAvatarSuccess(res: any) {
    state.imageUrl = res.data.url;
}
//封面上传后的钩子
function beforeAvatarUpload(file: any) {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        ElMessage.error("上传封面图片大小不能超过 2MB!");
    }
    return isLt2M;
}

//视频上传成功的钩子
function handleVideoSuccess(res: any, file: any) {
    state.form.videoFiles = res.data.url;
}

//视频上传后的钩子
function beforeVideoUpload(file: any) {
    const isLt2M = file.size / 1024 / 1024 < 500;
    if (!isLt2M) {
        ElMessage.error("上传视频大小不能超过 500MB!");
    }
    return isLt2M;
}

// 标签事件
function handleClose(tag: string) {
    state.dynamicTags.splice(state.dynamicTags.indexOf(tag), 1);
    state.tagList.push(tag);
}

function handleInputConfirm() {
    let inputValue = state.inputValue;
    if (inputValue) {
        state.dynamicTags.push(inputValue);
    }
    state.inputVisible = false;
    state.inputValue = "";
}

function handlePriceConfirm() {
    let priceValue = state.priceValue;
    if (priceValue) {
        state.priceList.push(priceValue);
    }
    state.priceVisible = false;
    state.priceValue = "";
}

const savePriceInput = ref<HTMLInputElement | null>(null);
const saveTagInput = ref<HTMLInputElement | null>(null);
// 价格事件
function showPriceInput() {
    state.priceVisible = true;
    state.priceIdx = state.priceList.length;
    nextTick(() => {
        if (savePriceInput.value) {
            savePriceInput.value.focus();
        }
    });
}

//todo
function showInput() {
    state.inputVisible = true;
    nextTick(() => {
        if (saveTagInput.value) {
            saveTagInput.value.focus();
        }
    });
}

//点击标签按钮
function tagClick(item: string) {
    state.tagList.splice(state.tagList.indexOf(item), 1);
    state.dynamicTags.push(item);
}

//发布
function submitUpload() {
    if (state.form.productName == "") {
        ElMessage.error("请输入作品标题");
        return;
    }
    if (state.dynamicTags.length == 0) {
        ElMessage.error("请选择标签");
        return;
    }
    if (state.form.categoryId.length == 0) {
        ElMessage.error("请选择文章分类");
        return;
    }
    if (state.form.productIntro == "") {
        ElMessage.error("请输入作品简介");
        return;
    }
    state.form.productTag = state.dynamicTags.join(",");
    state.form.categoryId = state.form.categoryId[state.form.categoryId.length - 1];
    state.form.productPrice = state.radio1 == 1 ? 0 : state.priceList[state.priceIdx];
    state.form.userCode = store.token.userCode;
    console.log(state.form);
    // return
    let url = "api/product/addProduct"
    if(productId){
        url = "api/product/updProduct"
        state.form.productId = productId
        delete state.form.productType
    }
    requester.post(url, state.form).then((res: any) => {
        if (res.code == 200) {
            ElMessageBox.confirm(
                "作品审核需要2-3个工作日, 可以在官网个人页查看审核情况",
                "提示",
                {
                    confirmButtonText: "确定",
                    type: "warning",
                    showCancelButton: false,
                    center: true,
                }
            )
                .then(() => {
                    navigateTo("/resources");
                })
                .catch(() => { });
        }
    });
}

// 富文本
function changeHtml(value: any) {
    if (value == '<p><br></p>') return
    state.form.productDesc = value
}

// 收益用户排行榜
function revenueRankList() {
    const param = {
        "pageValidate": {
            "pageNo": 1,
            "pageSize": 8
        },
    }
    requester.post('/api/account/revenueRankList', param).then((res: any) => {
        if (res.code == 200) {
            state.rankList = res.data.lists
        }
    })
}
revenueRankList()
</script>

<template>
    <myheader />
    <main class="main">
        <section class="bgCon">
            <div class="bgConChild bgConChild1"></div>
            <div class="bgConChild bgConChild2"></div>
            <div class="bgConChild bgConChild3"></div>
        </section>
        <div class="conWarp">
            <nav class="breadcrumbCon">
                <h2>发布作品</h2>
            </nav>
            <div class="conWarp-box">
                <article class="conWarp-left">
                    <div class="release">
                        <div class="release-page">
                            <div class="release-bg">
                                <el-upload :action="uploadUrl" :limit="1" :data="{ type: 2 }"
                                    class="upload-demo" drag :on-exceed="onExceed" :before-upload="beforeUpload"
                                    :on-success="handleZipSuccess" :class="[state.showBg ? '' : 'phone_upload']" :file-list="state.fileList">
                                    <img src="~/assets/resources/upload/文件上传@2x.png" alt="" class="uploadIcon">
                                    <div class="el-upload__text">
                                        <div>
                                            <p class="upload-tip1">
                                                小于1000MB<br>
                                                （请不要上传电子书等存在侵权的资源哦！）
                                            </p>
                                            <p>
                                                <em>点击上传</em>
                                            </p>

                                        </div>
<!--                                        <div class="upload-tip2">只能上传zip文件，大小不超过1G</div>-->
                                    </div>
                                </el-upload>
                                <div></div>
                            </div>
                            <div class="reasourcesNameBox">
                                <input class="reasourcesNameInput" v-model="state.form.productName" maxlength="100"
                                    autofocus type="text" placeholder="请输入标题（必填）">
                            </div>
                            <div class="formBox">
                                <el-form ref="form" :model="state.form" label-width="150px" label-position="left">


                                    <el-form-item label="标签：" required>
                                        <div class="tagBox">
                                            <div class="tagBoxInner">
                                                <el-tag type="primary" size="large" v-for="tag in state.dynamicTags"
                                                    :key="tag" closable :disable-transitions="false"
                                                    @close="handleClose(tag)">
                                                    {{ tag }}
                                                </el-tag>
                                                <el-input class="input-new-tag" v-if="state.inputVisible"
                                                    v-model="state.inputValue" ref="saveTagInput"
                                                    @keyup.enter.native="handleInputConfirm"
                                                    @blur="handleInputConfirm"></el-input>
                                                <el-button v-else class="button-new-tag" @click="showInput">+
                                                    添加标签</el-button>
                                            </div>
                                            <div class="tagItems">
                                                <el-button class="tagItem" v-for="(item, index) in state.tagList"
                                                    :key="index" size="small" @click="tagClick(item)">
                                                    {{ item }}
                                                </el-button>
                                            </div>

                                        </div>
                                    </el-form-item>
                                    <el-form-item label="文章分类：" required>
                                        <el-cascader style="width: 100%" v-model="state.form.categoryId"
                                            :props="state.props" :options="state.treeData"
                                            placeholder="请选择"></el-cascader>
                                    </el-form-item>
                                    <el-form-item label="作品简介：" required>
                                        <el-input placeholder="请描述作品类型，功能，使用平台，解决产品问题等"
                                            v-model="state.form.productIntro"></el-input>
                                    </el-form-item>
                                    <el-form-item label="价格：" required>

                                        <el-radio-group v-model="state.radio1">
                                            <el-radio :value="1" size="large">免费</el-radio>
                                            <el-radio :value="2" size="large">付费</el-radio>
                                        </el-radio-group>

                                        <!-- <el-button :type="state.radio1 == 1 ? 'primary' : 'info'"
                                            @click="state.radio1 = 1">免费</el-button>
                                        <el-button :type="state.radio1 == 2 ? '' : 'info'"
                                            :class="state.radio1 == 2 ? 'fufei' : ''" @click="state.radio1 = 2">
                                            付费
                                        </el-button> -->
                                        <div class="price">
                                            <el-button v-show="state.radio1 == 2"
                                                v-for="(item, index) in state.priceList" :key="index"
                                                :type="state.priceIdx == index ? 'primary' : ''"
                                                @click="state.priceIdx = index">{{ item }}元
                                            </el-button>
                                            <div class="customPrice" v-if="state.radio1 == 2">
                                                <el-input placeholder="输入价格" style="width: 150px; margin-left: 5px"
                                                    type="number" v-if="state.priceVisible" v-model="state.priceValue"
                                                    ref="savePriceInput" @keyup.enter.native="handlePriceConfirm"
                                                    @blur="handlePriceConfirm"></el-input>
                                                <el-button v-else :type="state.priceIdx == state.priceList.length ? 'primary' : ''
                                                    " @click="showPriceInput">自定义</el-button>
                                            </div>
                                        </div>

                                    </el-form-item>
                                </el-form>
                                <div>
                                    <ClientOnly>
                                        <WangEditor @changeHtml="changeHtml" :productDesc="state.form.productDesc"></WangEditor>
                                    </ClientOnly>
                                </div>
                            </div>



                            <el-dialog title="B站嵌入代码参考" v-model="state.showBl" :width="state.showBg ? '680px' : '95%'"
                                @close="state.showBl = false">
                                <div class="content">
                                    <div class="image-sample">
                                        <img style="width: 600px"
                                            src="https://xunying-xcp.oss-cn-shanghai.aliyuncs.com/static/b%E7%AB%99%E6%8C%87%E5%BC%95.png" />
                                    </div>
                                </div>
                            </el-dialog>

                            <el-dialog title="参考" v-model="state.showTitle" :width="state.showBg ? '510px' : '95%'"
                                @close="state.showTitle = false">
                                <div class="content">
                                    <div class="styles__StyledScreenTransferModal-sc-90b8ov-1 ddpRiU">
                                        <div class="reference-item">
                                            <span class="title">标题公式：</span>
                                            <span class="description">技术框架 / 行业 / 项目主题</span>
                                        </div>
                                        <div class="reference-item">
                                            <span class="title">标题案例：</span>
                                            <span class="description">基于Springboot + Vue 电商推荐系统</span>
                                        </div>
                                        <div class="image-sample">
                                            <!--              <img alt="title-reference-image-sample" src="">-->
                                        </div>
                                    </div>
                                </div>
                            </el-dialog>

                            <el-dialog title="简介参考" v-model="state.showDesc" :width="state.showBg ? '686px' : '95%'"
                                @close="state.showDesc = false">
                                <div class="content">
                                    <div class="styles__StyledScreenTransferModal-sc-17uuzmb-1 jNSYFF">
                                        <div class="reference-formula">
                                            <span class="title">简介公式：</span>
                                            <span class="description">产品类型/功能介绍/平台（移动端、web端）/适用产品场景等</span>
                                        </div>
                                        <div class="reference-item">
                                            <span class="title">以标题的素材参考为例</span>
                                        </div>
                                        <div class="reference-item">
                                            <span class="description">1、</span>
                                            <span class="description">产品类型：高保真旅游社交APP原型模版</span>
                                        </div>
                                        <div class="reference-item">
                                            <span class="description">2、</span>
                                            <span class="description">主要适用：移动端、Web端</span>
                                        </div>
                                        <div class="reference-item">
                                            <span class="description">3、</span>
                                            <span
                                                class="description">功能介绍：一套电商微信小程序+电商管理后台原型设计方案，适用于各种电商场景产品设计！<br />用户端：首页、分类、购物车、我的四大模块构成，包括详情、分搜索、拼团、秒杀、订单、售后、评价、客服、切换自提点等功能点<br />团长端：申请入驻、商品分享、到货通知、申请售后、佣金提现等功能<br />中台：监控分析、订单、商品、内容、用户、团长、运营、财务、设置等功能</span>
                                        </div>
                                        <div class="image-sample" v-if="state.showBg">
                                            <img alt="intro-reference-image-sample-1"
                                                src="https://modao.cc/mb-brand/images/square/upload/intro-reference-image-sample-1.png" />
                                            <img alt="intro-reference-image-sample-2"
                                                src="https://modao.cc/mb-brand/images/square/upload/intro-reference-image-sample-2.png" />
                                            <img alt="intro-reference-image-sample-3"
                                                src="https://modao.cc/mb-brand/images/square/upload/intro-reference-image-sample-3.png" />
                                            <img alt="intro-reference-image-sample-4"
                                                src="https://modao.cc/mb-brand/images/square/upload/intro-reference-image-sample-4.png" />
                                        </div>
                                    </div>
                                </div>
                            </el-dialog>

                            <div class="footerBtnBox">
                                <div class="footerWarp">
                                    <div class="footerLeft">
                                        <el-button class="footerBtn" type="primary" @click="submitUpload">确认发布
                                        </el-button>
                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>
                </article>
                <aside class="conWarp-right">
<!--                  右侧-->
                    <revenueUserRanking :rankList="state.rankList" />
                </aside>
            </div>
        </div>


    </main>
</template>

<style scoped lang="scss">
@import "./scss/index.scss";

:deep(.el-message-box__btns .el-button--small) {
    padding: 9px 120px;
}
:deep(input:focus){
    padding: 0;
}

.fufei {
    background-color: #fff;
    border-color: #1684fc;
    color: #1684fc;
}

.jump_icon {
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px;
    position: absolute;
    z-index: 1;
    background: #fff;
    top: 20px;
    cursor: pointer;
}

.release-page {
    box-sizing: border-box;
    min-height: 100vh;
}

:deep(.phone_upload .el-upload-dragger) {
    width: 90vw;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 100px;
    margin-left: 10px;
    height: 30px;
}

:deep(.el-form-item__label) {
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.avatar-uploader {
    position: relative;
    overflow: hidden;

    :deep(.el-upload) {
        border: 1px dashed #d9d9d9;
        width: 200px;
        border-radius: 6px;
    }

    :deep(.el-upload:hover) {
        background: #cfd6de20;
    }
}

.el-upload__tip {
    color: rgb(141, 158, 167);
}

.eximg {
    position: absolute;
    left: 240px;
    top: 40px;

    .description {
        font-weight: 400;
        font-size: 11px;
        line-height: 17px;
        color: rgb(141, 158, 167);
        margin-bottom: 12px;
    }

    .box {
        width: 95px;
        height: 72px;
        border: 1px solid rgb(200, 205, 208);
        border-radius: 4px;
        margin-right: 12px;
        position: relative;
        overflow: hidden;
    }
}

.content {
    padding: 0 24px;
}

.ddpRiU .reference-item {
    display: inline-block;
    margin-bottom: 30px;
}

.ddpRiU .title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: rgb(31, 41, 46);
    white-space: nowrap;
}

.ddpRiU .description {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: rgb(31, 41, 46);
}

.ddpRiU .image-sample {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.ddpRiU .image-sample img {
    width: 330px;
    height: 210px;
}

.jNSYFF .reference-formula {
    margin-bottom: 30px;
}

.jNSYFF .reference-item {
    display: flex;
    margin-bottom: 16px;
}

.jNSYFF .title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: rgb(31, 41, 46);
    white-space: nowrap;
}

.jNSYFF .description {
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    color: rgb(31, 41, 46);
}

.jNSYFF .image-sample {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.jNSYFF .image-sample img {
    width: 110px;
    height: 220px;
    margin-left: 20px;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

.avatar {
    width: 200px;
    height: 150px;
    display: block;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

.ql-editor {
    //height: 500px;
    margin-left: -15px;
    margin-top: -15px;
}
</style>
<style scoped lang="scss">
.main {
    padding-bottom: 80px;
}

.breadcrumbCon {
    margin-top: 24px;
}

.tagBox {
    width: 100%;

    .tagBoxInner {
        padding: 13px 29px;
        border: 1px dashed #707070;
        border-radius: 10px;
    }

    .tagItems {
        margin-top: 10px;

        .tagItem {
            background: #F0F0F0;
            border: 1px solid #F0F0F0;
            border-radius: 4px;
            font-size: 13px;
            color: #666666;
            padding: 6px 16px;
            height: unset;
        }
    }
}

.release-bg {
    :deep(.el-upload-dragger) {
        background: rgba(255, 255, 255, 0.3);
        border: 1px dashed #9D9D9D;
    }

    .upload-demo {
        display: block;
        height: 100%;
    }

}

.el-upload__text {
    line-height: 24px;

    .upload-tip1 {
        font-size: 16px;
        color: #666666;
    }

    .upload-tip2 {
        font-size: 14px;
        color: #C4C4C4;
    }


}

.formBox,
.reasourcesNameBox {
    margin-top: 24px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    padding: 30px;
}

.reasourcesNameBox {
    .reasourcesNameInput {
        font-size: 24px;
        line-height: 26px;
        padding: 0;
        width: 100%;
        border: none;
        outline: none;
    }

}

.uploadIcon {
    width: 52px;
}

.price {
    :deep(.el-button) {
        padding: 8px 20px;
        margin-right: 10px;
        margin-left: 0;
        margin-bottom: 10px;
    }

    :deep(.el-button--primary) {
        background-color: #333333;
        border-color: #333333;
        color: #ffffff;
    }
}

.customPrice {
    display: inline-block;
}

.footerBtnBox {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 22px 0;
    width: 100%;
    background-color: #ffffff;

    .footerWarp {
        width: 1200px;
        margin: 0 auto;

        .footerLeft {
            width: 867px;
            text-align: right;
        }

        .footerBtn {
            width: 137px;
            height: 44px;
            background: #70A3FF;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #70A3FF;
        }
    }
}
</style>
